<template>
    <page-wrapper>
        <table-search @search="search(1)" @reset="reset()">
            <template slot="form">
                <form-item label="">
                    <a-input v-model.trim="form.ctgName" placeholder="名称" />
                </form-item>
            </template>
            <template slot="extra">
                <a-button
                    class="filter-item"
                    type="primary"
                    icon="plus"
                    :disabled="hasPerm(['product:type:add'])"
                    @click="add()"
                    >新增类别</a-button
                >
                <!-- <a-button
                    class="filter-item btn_space"
                    type="danger"
                    @click="remove()"
                    :disabled="!selectionBox.length || hasPerm(['product:type:remove'])"
                    icon="delete"
                    >删除</a-button
                > -->
            </template>
        </table-search>
        <table-list
            :loading="loading"
            :columns="columns"
            rowKey="id"
            childrenColumnName="childs"
            :pagination="pagination"
            :data="list"
        >
            <template slot="action" slot-scope="{ text }">
                <a-button size="small" type="primary" @click="update(text)" :disabled="hasPerm(['product:type:update'])"
                    >编辑</a-button
                >
                <a-button
                    size="small"
                    class="btn_space"
                    v-if="text.parentId == 0"
                    type="primary"
                    @click="addChild(text)"
                    :disabled="hasPerm(['product:type:add'])"
                    >添加子分类</a-button
                >
                <a-button
                    size="small"
                    class="btn_space"
                    type="danger"
                    @click="remove(text)"
                    :disabled="accountInfo.roleName!='superAdmin'"
                    >删除</a-button
                >
            </template>
        </table-list>
        <template v-if="isShow">
            <show-info :info="info" :parent="parentId" @cancel="isShow = false" @submit="submitTypes" />
        </template>
    </page-wrapper>
</template>
<script>
import table from '@/mixins/table';
import { columns } from './columns';
import showInfo from './components/info';
import { remoteList, deleteInfo } from '@/api/product/type';
import { mapState } from 'vuex';

export default {
    name: 'UserList',
    mixins: [table],
    components: {
        showInfo
    },
    computed: {
        ...mapState({
            accountInfo: state => state.user.accountInfo
        })
    },
    data() {
        let originForm = {
            ctgName: ''
        };
        return {
            columns,
            originForm,
            form: {
                ...originForm
            },
            isShow: false,
            info: {},
            parentId: ''
        };
    },
    created() {
        this.search(1);
    },
    methods: {
        async search(page) {
            try {
                this.loading = true;
                if (page) {
                    this.form.page = page;
                }
                this.list = [];
                let res = await remoteList(this.form);
                // let { list, total } = res.data;
                let list = res.data;
                this.deleteDataChild(list);
                this.list = list;
                // this.total = total;
            } finally {
                this.loading = false;
            }
        },
        deleteDataChild(data) {
            data.map(item => {
                if (!item.childs || item.childs?.length == 0) {
                    delete item.childs;
                } else {
                    item.childs = this.deleteDataChild(item.childs);
                }
            });
            return data;
        },
        //新增
        add() {
            this.isShow = true;
            this.info = {};
            this.parentId = 0;
        },
        //添加子分类
        addChild(text) {
            this.isShow = true;
            this.info = {};
            this.parentId = text.id;
        },
        //修改
        update(item) {
            console.log(item);
            this.isShow = true;
            this.info = item;
            this.parentId = item.parentId;
        },
        //删除
        remove(item) {
            this.$confirm({
                title: '提示',
                content: '确定要删除分类？',
                okText: '确定',
                cancelText: '取消',
                onOk: async () => {
                    let ids = [];
                    if (item) {
                        ids = [item.id];
                    } else {
                        let selectionBox = this.selectionBox;
                        console.log(selectionBox);
                        selectionBox.map(async item => {
                            ids.push(item.id);
                        });
                    }
                    await deleteInfo({ ids });
                    this.$message.success('删除成功!');
                    this.search(1);
                },
                onCancel() {}
            });
        },
        submitTypes() {
            this.isShow = false;
            this.info = {};
            this.parentId = '';
            this.search(1);
        }
    }
};
</script>
